<template>
    <header>
        <div :class="['header-box', is_show_header_back || showBack ? 'back' : '']">
            <div class="logo eli1">
                <a href="/" v-if="!isPhone">{{ logo.title }}</a>
                <span v-if="!showSearch && isPhone" @click="openShowPhoneList">{{ logo.title }}</span>
            </div>
            <div class="right-pc-box">
                <div class="search">
                    <input placeholder="请输入搜索内容" v-model="serchValue" @keydown.enter="handleSearch" />
                    <img src="../../assets/images/search.png" alt="搜索" @click="handleSearch" />
                </div>
                <ul class="nav-list">
                    <li class="item" v-for="(item, index) in nav" :key="index">
                        <a v-if="(item.path == 'null' || !item.path) && !item.list.length"
                            :href="'/articles/' + item.ID">{{
                                item.title }}</a>
                        <a v-else-if="item.path" :href="item.path">{{ item.title }}</a>
                        <span v-else>{{ item.title }}</span>
                        <div class="item-list-wrop" v-if="item.list.length">
                            <div class="item-list">
                                <div class="item-item" v-for="(itm, idx) in item.list" :key="idx">
                                    <a v-if="itm.path == 'null' || !itm.path" :href="'/articles/' + itm.ID">{{ itm.title
                                        }}</a>
                                    <a v-else :href="itm.path">{{ itm.title }}</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li v-if="is_show_login && showLogin" class="login item" @click="openLogin()">登录</li>
                    <div class="icon-box" v-if="showLogin && !is_show_login">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <el-avatar size="medium" :src="userInfo.icon"></el-avatar>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>{{ userInfo.username }}</el-dropdown-item>
                                <!-- <el-dropdown-item >修改密码</el-dropdown-item> -->
                                <!-- <el-dropdown-item >修改个人信息</el-dropdown-item> -->
                                <el-dropdown-item>
                                    <div @click="loginOut">退出登录</div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </ul>
            </div>
            <div :class="['right-phone-box', showSearch ? 'right-phone-box-width' : '']">
                <div :class="['search', showSearch ? 'search-phone-box' : '']">
                    <input placeholder="请输入搜索内容" v-model="serchValue" :class="showSearch ? 'search-phone' : ''" />
                    <img src="../../assets/images/search.png" alt="搜索" @click="handleSearch" />
                    <span v-if="showSearch" class="cancel-tips" @click="cancelSearch">取消</span>
                </div>
            </div>
        </div>
        <div class="phone-list">
            <van-popup v-model="showPhoneList" position="top" :style="{ height: '100%' }" closeable>
                <!-- <div class="logo eli1">{{ logo.title }}</div> -->
                <div class="login-box" @click="openLogin()" v-if="is_show_login && showLogin">登录</div>
                <div class="login-box" v-if="showLogin && !is_show_login">
                    <el-avatar size="medium" :src="userInfo.icon"></el-avatar>
                    <div class="user-info-phone">
                        <div>{{ userInfo.username }}</div>
                        <div @click="loginOut" class="login-out">退出登录</div>
                    </div>
                </div>
                <template v-for="(item, index) in phoneList">
                    <template v-if="!item.list.length">
                        <van-cell v-if="item.path == 'null' || !item.path" :title="item.title"
                            :url="'/articles/' + item.ID"></van-cell>
                        <van-cell v-else :title="item.title" :url="item.path"></van-cell>
                    </template>
                    <template v-else>
                        <van-cell :title="item.title" is-link :arrow-direction="item.arrow" @click="openLabel(index)">
                            <template #label v-if="item.list.length && item.active">
                                <template v-for="(itm, idx) in item.list">
                                    <van-cell v-if="itm.path == 'null' || !itm.path" :title="itm.title"
                                        :url="'/articles/' + itm.ID"></van-cell>
                                    <van-cell v-else :title="itm.title" :url="itm.path"></van-cell>
                                </template>
                            </template>
                        </van-cell>
                    </template>
                </template>
            </van-popup>
        </div>
        <div class="phone-empty" v-if="isPhone || showBack"></div>
    </header>
</template>
<script>
import { showToast, isPhone, getCookies, removeCookie } from '../../utils/index';
import request from '~/request/request';
export default {
    name: 'HomeHeader',
    props: {
        nav: {
            type: Array,
            default: () => []
        },
        logo: {
            type: Object,
            default: () => {
                return {
                    title: '博客'
                }
            }
        },
        showBack: {
            type: Boolean,
            default: false
        },
        showLogin: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            serchValue: '', // 搜索内容
            is_show_login: true,
            userInfo: {
                icon: ''
            },
            isPhone: false,
            showSearch: false,
            showPhoneList: false,
            phoneList: [], //手机端显示列表
            is_show_header_back: false
        }
    },
    mounted() {
        this.getIsPhone();
        this.init();
        window.addEventListener('scroll', this.handleScroll);
        this.handleScroll();
        this.getLoginInfo();
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        /**初始化*/
        init() {
            this.phoneList = [];
            this.showPhoneList = false;
            this.nav.forEach(v => {
                this.phoneList.push({
                    active: false,
                    arrow: 'down',
                    ...v
                })
            })
        },
        /**搜索*/
        handleSearch() {
            if (!this.showSearch) {
                this.showSearch = true;
                return;
            }
            if (!this.serchValue) {
                showToast({
                    msg: '请输入搜索内容',
                    type: 'error'
                });
                return;
            }
            /**判断当前页面是不是搜索页面*/
            if (this.$route.path.indexOf('/search') > -1) {
                this.$emit('onSearch', this.serchValue);
                return;
            }
            this.$router.push('/search/' + this.serchValue);
        },
        /**打开登录*/
        openLogin() {
            if (this.userInfo.icon) {
                return;
            }
            // 判断当前路由是否为主页面
            if (this.$route.path !== '/') {
                this.$router.push('/?login=true&path=' + this.$route.path);
                return;
            }
            this.$emit('openLogin', this.isPhone ? 'phone' : 'pup');
        },
        /**获取是否在手机端*/
        async getIsPhone() {
            this.isPhone = await isPhone();
            let query = this.$route.query;
            if (query.login) {
                this.openLogin();
            }
            window.addEventListener('resize', async () => {
                this.isPhone = await isPhone();
                if (!this.isPhone && this.showSearch) {
                    this.cancelSearch()
                }
                this.init();
            });
        },
        /**关闭搜索框*/
        cancelSearch() {
            this.showSearch = false;
            this.serchValue = '';
        },
        /**打开手机端菜单弹框*/
        openShowPhoneList() {
            this.showPhoneList = !this.showPhoneList;
        },
        /**
         * 打开label
         * @param {Number} index 下标
         * */
        openLabel(index) {
            this.phoneList[index].active = !this.phoneList[index].active;
            this.phoneList[index].arrow = this.phoneList[index].active ? 'up' : 'down';
        },
        handleScroll() {
            if (this.isPhone) {
                this.is_show_header_back = true;
                return;
            }
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条滚动高度
            if (scrollTop > 100) {
                this.is_show_header_back = true;
            } else {
                this.is_show_header_back = false;
            }
        },
        async getLoginInfo() {
            let userInfo = await this.$store.dispatch('user/getUserInfo');
            if (!userInfo.isLogin) return;
            this.userInfo = userInfo.userInfo;
            this.is_show_login = false;
        },
        /**退出登录*/
        loginOut() {
            request({
                url: '/api/users/webLoginOut',
                method: 'POST'
            }).then(res => {
                if (res.code === 200) {
                    showToast({
                        msg: '退出登录成功',
                        type: 'success'
                    });
                    removeCookie('token');
                    removeCookie('userInfo');
                    this.userInfo = {
                        icon: ''
                    };
                    this.is_show_login = true;
                    this.$emit('loginOut');
                }
            }).catch(err => {
                showToast({
                    msg: err.message || '退出登录失败',
                    type: 'error'
                });
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;

    .logo {
        font-size: 20px;
        font-weight: bold;

        a {
            color: #fff;
        }
    }
}

.search {
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    height: 30px;
    width: 240px;
    padding: 0px 10px 0px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;

    input {
        width: calc(100% - 30px);
        height: calc(100% - 10px);
        color: black;
    }

    img {
        width: 20px;
        cursor: pointer;
    }
}

.right-phone-box {
    display: none;
}

.right-pc-box {
    display: flex;
    align-items: center;

    .nav-list {
        padding-top: 6px;
        display: flex;
        align-items: center;

        .item {
            display: inline-block;
            cursor: pointer;
            margin-right: 25px;
            padding-bottom: 10px;
            border-bottom: 1px solid transparent;

            &:hover {
                .item-list-wrop {
                    display: block;
                }

                border-bottom: 1px solid var(--themeColor);
            }

            .item-list-wrop {
                display: none;
                position: relative;

                .item-item {
                    &:hover {
                        background-color: #ccc;
                    }
                }
            }

            a {
                color: #fff;
            }

            span {
                color: #fff;
            }
        }

        .item-list {
            position: absolute;
            text-align: center;
            box-shadow: 0 4px 8px 6px rgba(7, 17, 21, 0.06);
            background-color: #fff;
            padding: 3px 5px;
            border-radius: 8px;
            top: 10px;
            width: 100px;
            left: -20px;
            z-index: 10;
            color: #000;

        }

        .item-item {
            width: 100%;
            padding: 5px 0;

            a {
                color: var(--fontColor);
            }

            &:hover {
                a {
                    color: var(--themeColor);
                }
            }
        }

        .login {
            display: inline-block;
            color: var(--themeColor);
        }

        .icon-box {
            display: inline-block;
            position: relative;
            padding-bottom: 10px;

            &:hover {
                .select {
                    display: block;
                }
            }

            .icon {
                background-color: #fff;
                border: 1px solid #999;
                border-radius: 50%;
                overflow: hidden;
            }

            .select {
                position: absolute;
                left: -50px;
                width: 110px;
                top: 50px;
                background-color: #fff;
                padding: 5px;
                box-shadow: 0 4px 8px 6px rgba(7, 17, 21, 0.06);
                display: none;
                cursor: pointer;
                border-radius: 3px;
                text-align: center;

                &::before {
                    content: "";
                    width: 0;
                    height: 0;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #fff;
                    position: absolute;
                    left: 60px;
                    top: -10px;
                }

                .option {
                    padding: 5px;
                    color: #333;
                    border-bottom: 1px solid rgba(155, 155, 155, 0.5);

                    &:hover {
                        color: var(--themeColor);
                    }

                    &:last-child {
                        border-bottom: 0;
                    }
                }
            }
        }
    }
}

.back {
    background-color: white;
    color: #000;
    box-shadow: 0 4px 8px 6px rgba(7, 17, 21, 0.06);

    .logo {
        a {
            color: var(--fontColor);
        }
    }

    .search {
        border: 1px solid var(--fontColor);
    }

    .right-pc-box .nav-list .item a {
        color: var(--fontColor);
    }

    .right-pc-box .nav-list .item span {
        color: var(--fontColor);
    }
}

@media (max-width: 768px) {
    .header-box {
        padding: 10px 20px;
        position: fixed;
        top: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 99;
        box-shadow: 0 4px 8px 6px rgba(7, 17, 21, 0.06);
    }

    .back {
        .search {
            border: 0;
        }
    }

    .right-pc-box {
        display: none;
    }

    .right-phone-box {
        width: auto;
        display: block;

        .search {
            width: auto;
            margin-right: 0;

            input {
                width: 0;
                transition: all .2s;
            }

            .search-phone {
                width: 80%;
            }

        }

        .search-phone-box {
            width: 100%;
            border: 1px solid #999;
        }

        .cancel-tips {
            font-size: 14px;
            color: var(--fontColor);
        }
    }

    .right-phone-box-width {
        width: 100%;
    }

    .phone-list {
        .logo {
            font-size: 20px;
            font-weight: bold;
            padding: 10px 20px;
            color: var(--fontColor);
        }

        .login-box {
            padding: 10px 20px;
            color: var(--themeColor);
            display: flex;
            align-items: center;

            .user-info-phone {
                margin-left: 10px;

                div {
                    font-size: 14px;
                }

                .login-out {
                    font-size: 12px;
                    color: var(--fontColor);
                }
            }
        }
    }
}

.phone-empty {
    height: 60px;
}
</style>